<template>
  <div class="page-container">
    <div class="success-page flex-center flex-column">
      <div class="success-icon">
        <t-icon name="check-circle" />
      </div>
      <div class="success-title">提交成功！</div>
      <div class="success-desc">
        您的信息已成功提交，我们将尽快为您处理。
      </div>
      
      <div class="action-buttons">
        <t-button theme="primary" size="large" @click="goHome">
          返回首页
        </t-button>
        <t-button theme="default" size="large" @click="fillAgain" class="mt-16">
          再次填写
        </t-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Button as TButton, Icon as TIcon } from 'tdesign-mobile-vue'
import { useFormStore } from '@/store/form'

const router = useRouter()
const formStore = useFormStore()

const goHome = () => {
  router.push('/')
}

const fillAgain = () => {
  formStore.resetForm()
  router.push('/form')
}
</script>

<style lang="less" scoped>
.success-page {
  min-height: 60vh;
  padding: 40px 24px;
  text-align: center;
  
  .action-buttons {
    width: 100%;
    max-width: 300px;
    margin-top: 40px;
    
    .t-button {
      width: 100%;
    }
  }
}
</style>